<template>
	<view class="row" @click="onClick">
		<view class="part">
			<uni-icons :type="icon" class="icon" size="20" color="#28B389"></uni-icons>
			<text class="text">{{title}}</text>
		</view>
		<view class="part right">
			<text class="text" v-if="!nonNumber">{{number}}</text>
			<uni-icons type="right" class="icon" color="#aaa" size="15"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	
	const props = defineProps({
	  // 定义多个属性
	  title: {
	    type: String,
	    default: '默认标题'
	  },
	  number: {
	    type: Number,
	    default: 0
	  },
	  icon:
	  {
	  	type: String,
	  	default: "gear-filled"
	  },
	  nonNumber:
	  {
	  	type: Boolean,
	  	default: false
	  }
	})
	
	const emits = defineEmits(['click'])
	
	const onClick = (e)=> {
		emits('click',e)
	}
</script>

<style lang="scss" scoped>
.row{
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding: 0 10rpx;
	&:last-child{
		border-bottom: 0px;
	}
	.part{
		display: flex;
		align-items: center;
		justify-content: center;
		:deep(){
			.uni-icons{
				color: $brand-theme-color !important;
			}
		}
		.text{
			line-height: 100rpx;
			color: $text-color-sub;
			margin: 0 10rpx;
			font-size: 30rpx;
		}
	}
	.right{
		.text{
			color: $text-color-grey;
		}
	}
}
</style>